<template>
  <el-dialog :visible="visible"
             :before-close="close"
             :close-on-click-modal="false"
             append-to-body
             title="文件下载"
             width="50%"
             top="20vh">
    <el-table :data="currentData"
              height="400px"
              style="width: 100%">
      <el-table-column type="index"
                       width="50"
                       label="序号">
      </el-table-column>
      <template v-for="(item, index) in column">
        <el-table-column :key="index"
                         :prop="item.name"
                         :label="item.label"
                         :show-overflow-tooltip="true"
                         :width="item.name === 'operation'?'130px':null">
          <template slot-scope="scope">
            <div v-if="item.name === 'finshing'">
              <el-tag v-if="scope.row.status === 1">已完成</el-tag>
              <el-progress v-else
                           :percentage="scope.row.progress"
                           :color="customColor" />
            </div>
            <div v-else-if="item.name === 'operation'">
              <el-button type="text"
                         :disabled="!scope.row.url"
                         @click="handleDownload(scope.row)">下载</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button type="text"
                         @click="handleRemove(scope.row)">删除</el-button>
            </div>
            <div v-else-if="item.name === 'status'">
              <div v-if="scope.row.url">{{ scope.row.downloaded ? "已下载" : "未下载" }}</div>
              <div v-else>--</div>
            </div>
            <div v-else>{{ scope.row[item.name] || '--' }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </el-dialog>
</template>

<script>
import { exports } from "@/api/index";
import { mapActions } from "vuex";
import _ from "lodash";
export default {
  name: "FileExportDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      customColor: '',
      currentData: [], // 数据源
      timer: null
    };
  },
  computed: {
    params () {
      return {
        sort: [{ name: "createAt", asc: false }]
      }
    },
    column () {
      return [
        { label: "文件名称", name: "name" },
        { label: "导出时间", name: "createAt" },
        { label: "预计完成", name: "finshing" },
        { label: "下载状态", name: "status" },
        { label: "操作", name: "operation" },
      ]
    }
  },
  created () {
    this.getList(1);
  },
  methods: {
    // 查询导出未读数
    ...mapActions({
      searchCount: "login/exportCount"
    }),
    // 列表查询
    async getList (timerFlag) {
      const { data } = await exports.search({ ...this.params });
      this.currentData = data?.records;
      if (data?.records && data?.records.length && timerFlag) {
        let flag = false
        // 任务状态其一为未完成时，定时刷新列表查询
        data.records.map(item => {
          if (item.status != 1)
            return flag = true
        })
        if (flag) this.timerRefresh()
      }
    },
    // 刷新 
    timerRefresh () {
      this.timer = setTimeout(() => {
        if (this.visible) {
          console.log("-------visible", this.visible)
          this.getList(1)
        }
      }, 5000)
    },
    // 下载
    async handleDownload (r_data) {
      await exports.updateTaskStatus({ exportTaskId: r_data.exportTaskId })
      // this.$tools.orderDownload(r_data.url)
      let newUrl = r_data.url.includes('https') ? r_data.url : r_data.url.replace('http', 'https')
      window.location.href = newUrl
      // orderDownload(r_data.url)
      this.searchCount();
      this.getList();
    },
    handleRemove: _.debounce(function (row) {    // 触发事件
      this.remove(row);
    }, 200),
    // 删除
    async remove (_data) {
      await exports.delete(_data.exportTaskId);
      this.$message({ type: "success", message: "操作成功！" });
      this.searchCount()
      this.getList()
    },
    // 取消
    close () {
      this.$emit("update:visible", false);
      // 清除定时器
      clearTimeout(this.timer);
    },
    beforeDestroy () {
      clearTimeout(this.timer);
    }
  }
};
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
</style>
